<app-content-header
>
</app-content-header>

<app-detail-header
  *ngIf="!loading"
  [title]="'GENERAL.INFO.BASIC' | i18n"
  (edit)="triggerBaseEdit()"
  (cancel)="cancelBase()"
  (save)="saveBase()"
  [hideIcon]="!aclService.canAbility('api.put.camel.institution.one')"
></app-detail-header>

<nz-spin [nzSpinning]="loading"></nz-spin>

<app-base-info
  *ngIf="!loading"
  [imgSrc]="imgSrc"
  [(firstColumns)]="firstColumns"
  [(secondColumns)]="secondColumns"
  [(bottomColumnsRows)]="bottomColumnsRows"
></app-base-info>

<app-detail-header
  *ngIf="!loading"
  [title]="'GENERAL.INFO.OTHER' | i18n"
  [ifEditable]="false"
  [tabs]="tabs"
  class="cil__scroll-div"
></app-detail-header>

<router-outlet *ngIf="!loading"></router-outlet>

<!-- this is use for testing the custom table -->
<!-- <app-history-expand-table [data]="tasks"></app-history-expand-table> -->

<ng-template #tpBusArea>
  <nz-select
    [style.width]="'100%'"
    [(ngModel)]="detailData.common.businessArea"
    [nzAllowClear]="false"
  >
    <nz-option
      *ngFor="let item of bizAreaOptions"
      [nzLabel]="item.label"
      [nzValue]="item.value"
    ></nz-option>
  </nz-select>
</ng-template>

<ng-template #tpCurrency>
  <app-currency-select
    multiple
    required
    [(ngModel)]="detailData.common.currencies"
    (requiredEvent)="currencyRequiredHandler()"></app-currency-select>
</ng-template>

<ng-template #tpCountry>
  <app-country-select
    [(ngModel)]="detailData.common.address.nation"
    [allowClear]="false"
    type="string">
  </app-country-select>
</ng-template>

<ng-template #tpControl>
  <div class="btn-groups">
    <button class="custom-btn ng-star-inserted" (click)="freezeDialog()" *ngIf="detailData.common.status === 'normal'">
      <i nz-icon [nzIconfont]="'icon-lock-square'"></i>
    </button>
    <button class="custom-btn ng-star-inserted" (click)="unfreezeDialog()" *ngIf="detailData.common.status === 'freeze'">
      <i nz-icon [nzIconfont]="'icon-unlock'"></i>
    </button>
  </div>
</ng-template>
